<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">

        <span>Message: {{ msg }}</span>
    <!-- 最通常的获取vue值的方式，一看就会 -->
        <br>
        <span>这个将会改变: {{ msg0 }}</span>
        <br>
        <span v-once>这个将不会改变: {{ msg0 }}</span>

        <p>Using mustaches: {{ rawHtml }}</p>
        <!-- 仅仅只用大括号的话，是无法从vue实例中直接传递一整个html标签的 -->
        <p>Using v-html directive: <span v-html="rawHtml"></span></p>
        <!-- 而使用v-html进行渲染就可以了 -->

        <div v-bind:id="dynamicId">v-bind:id="dynamicId"</div>
        <!-- 所有的v-bind里的值视作js语法，这里意味id就是dynamicId -->

        <!-- 对于布尔特性 (它们只要存在就意味着值为 true)， -->
        <!-- v-bind 工作起来略有不同，在这个例子中： -->

        <button v-bind:disabled="isButtonDisabled">Button</button>
        <button v-bind:disabled="isButtonDisabled1">Button</button>
        <!-- 如果 isButtonDisabled 的值是 null、undefined 或 false， -->
        <!-- 则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。 -->

        
        <p>{{ number + 1 }}</p>
        <!-- {{}} 存在默认js行为，因此此处会输出的值是算数后的值 -->
        <p>{{ ok ? 'YES' : 'NO' }}</p>

        <p>{{ message.split('').reverse().join('') }}</p>
        <!-- 允许复杂js -->

        <!-- 每个绑定都只能包含单个表达式 -->
        <!-- 流控制不会生效，请使用三元表达式 -->
        <!-- {{ if (ok) { return message } }} -->

        <div @click="click1">
            <div @click="click2">
                click me!
            </div>
        </div>


        <div @click="click1">
            <div @click.stop="click2">
                click me!
            </div>
            <!-- stop停止event事件，使点击事件停留在click2而不上传至click1 -->
        </div>

        <!-- 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，
            还需要避免使用大写字符来命名键名，
            因为浏览器会把 attribute 名全部强制转为小写 -->


        <!-- v-on（@）访问method v-bind（:）访问data -->


    </div>
    <script src="./vue.js"></script>

    <style>
        #blue{
            color: blue;
        }
    </style>
</body>
</html>